<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <p v-html="title" v-bind:title="obj.age"></p>
        <button v-on:click="change">点击修改title</button>
        <span v-text="obj.name"></span> - {{obj.age}}
    </div>
</body>
<script src="../libs/vue3.js"></script>
<script>
    const {createApp, ref, reactive} = Vue;

    const app = createApp({
        setup(){
            const title = ref("vue3的setup");
            const obj = reactive({
                name:"vue3",
                age:"两岁"
            })
            
            const change = ()=>{
                title.value = "欢迎进入vue3的组合式API";
                obj.age = "三岁"
                console.log(title.value)
            }

            return {
                title, change, obj
            }
        }
    })
    app.mount("#app");

</script>
</html>